<template>
	<div id="category">
    <nav-bar class="category-navBar">
        <template #center>
            <div>商品分类</div>
        </template>
      </nav-bar>

    <div class="content">
      <CategoryTabMenu :categories="categories" @selectItem="selectItem"></CategoryTabMenu>
      <Scroll id="tab-content" ref="scroll">
        <CategoryTabContent :subcategories="showSubcategory" @itemEndload="itemEndload"></CategoryTabContent>
        <tabControl :titles="['综合', '新品', '销量']" @tabclick="tabclick"></tabControl>
        <CategoryTabContentDetail :category-detail="showCategoryDetail"></CategoryTabContentDetail>
      </Scroll>
    </div>
  </div>
</template>

<script>
  import NavBar from "../../components/common/navbar/NavBar";
  import CategoryTabMenu from "./child/CategoryTabMenu";
  import {getCategory,getSubcategory,getCategoryDetail} from "../../netword/category";
  import CategoryTabContent from "./child/CategoryTabContent";
  import Scroll from "../../components/common/scroll/Scroll";
  import tabControl from "../../components/tabControl/tabControl";
  import CategoryTabContentDetail from "./child/CategoryTabContentDetail";
  export default {
    components:{
      NavBar,CategoryTabMenu,CategoryTabContent,Scroll,tabControl,CategoryTabContentDetail
    },
    data(){
      return{
        categories:[],
        categoryData:[],
        currentIndex:-1,
        currentType:"pop"
      }
    },
    created() {
      this._getCategory()
    },
    computed:{
      showSubcategory(){
        if(this.currentIndex === -1) return {}
        return this.categoryData[this.currentIndex].subcategories
      },
      showCategoryDetail() {
        if (this.currentIndex === -1) return []
        return this.categoryData[this.currentIndex].categoryDetail[this.currentType]
      }
    },
    methods:{
      //获取侧边栏的数据
      _getCategory(){
        getCategory().then(res=>{
          this.categories=res.data.category.list
          for(let i=0;i<this.categories.length;i++){
            this.categoryData[i]={
              subcategories: {},
              categoryDetail: {
                'pop': [],
                'new': [],
                'sell': []
              }
            }
          }
          this._getSubcategory(0)
        })
      },
    //  侧边栏item的数据
      _getSubcategory(index){
        this.currentIndex=index
        const maitKey=this.categories[index].maitKey
        getSubcategory(maitKey).then(res=>{
          this.categoryData[index].subcategories=res.data
          this.categoryData = {...this.categoryData}
          this._getCategoryDetail('pop')
          this._getCategoryDetail('new')
          this._getCategoryDetail('sell')
        })
      },
    //  选中的item的数据
      selectItem(index){
        this._getSubcategory(index)
      },
      itemEndload(){
        this.$refs.scroll.refresh()
      },
    //  获取商品栏的数据
      _getCategoryDetail(type){
        const miniWallkey=this.categories[this.currentIndex].miniWallkey
        getCategoryDetail(miniWallkey, type).then(res=>{
          this.categoryData[this.currentIndex].categoryDetail[type]=res
          this.categoryData = {...this.categoryData}
        })
      },
      tabclick(index){
        switch (index) {
          case 0:
            this.currentType='pop'
            break
          case 1:
            this.currentType='new'
            break
          case 2:
            this.currentType='sell'
            break
        }
      }
    }
  }
</script>

<style scoped>
  #category{
    height: 100vh;
  }
  .category-navBar{
    background-color: var(--color-tint);
    color: white;
  }
  .content{
    position: absolute;
    top: 44px;
    bottom: 49px;
    display: flex;
    left: 0px;
    right: 0px;
  }
  #tab-content{
    height: 100%;
    flex: 1;
    overflow: hidden;
  }
</style>
